<template>
  <div class="app-container">
    <div class="panel" style="width: 170vh; height: 85vh;">
      <div id="main" style="width: 170vh; height: 85vh;"></div>
      <div class="panel-footer"></div>
    </div>
  </div>
</template>

<script>
import { selectecharts } from "@/api/chart/statistics";
import echarts from 'echarts'

export default {
  name: "Statistics",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ybssProvince: null,
        ybssCity: null,
        ybssCounty: null,
        ybssStreet: null,
        belongingCommunity: null,
        policeStation: null,
        policeRoom: null,
        levelCode: null,
        municipalCode: null,
        districtCode: null,
        theCode: null,
        communityCode: null,
        stationCode: null,
        policeOfficeCode: null,
        streetRoadLan: null,
        houseNumber: null,
        housingEstate: null,
        childStreet: null,
        sonHouseNumber: null,
        subDistrict: null,
        thirdRoadlane: null,
        gradeNumber: null,
        levelNeighborhood: null,
        nameofBuildings: null,
        nameofTheunit: null,
        nameofTheroom: null,
        completeAddress: null,
        imagePath: null,
        x: null,
        y: null,
        addPersonName: null,
        addTime: null,
        modificationTime: null,
        modifierName: null,
        ybssState: null,
        houseHoldNames: null,
      },

    };
  },
  mounted() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    const colors = ['#5470C6', '#91CC75', '#EE6666'];
    option = {
      color: colors,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
      },
      grid: {
        left : '3%',
        right : '12%', ///   调整大小
        bottom : '3%',
        // show:true, //  边框是否显示
        containLabel : true
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ['完成量', '未完成量', '完成度']
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          // prettier-ignore
          data: []
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '完成量',
          min: 0,
          max: 250,
          position: 'right',
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[0]
            }
          },
          axisLabel: {
            formatter: '{value} ml'
          }
        },
        {
          type: 'value',
          name: '未完成量',
          min: 0,
          max: 250,
          position: 'right',
          offset: 80,
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[1]
            }
          },
          axisLabel: {
            formatter: '{value} ml'
          }
        },
        {
          type: 'value',
          name: '完成度',
          min: 0,
          max: 25,
          position: 'left',
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[2]
            }
          },
          axisLabel: {
            formatter: '{value} °C'
          }
        }
      ],
      series: [
        {
          name: '完成量',
          type: 'bar',
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
          ]
        },
        {
          name: '未完成量',
          type: 'bar',
          yAxisIndex: 1,
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
          ]
        },
        {
          name: '完成度',
          type: 'line',
          yAxisIndex: 2,
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
      ]
    };

    option && myChart.setOption(option);
  },
  created() {

  },
  methods: {
    },
};
</script>
<style scoped>
  .panel {
    padding: 5px;
    margin: 5px;
    border-style: 2px solid;
    position: relative;
    background: rgba(101, 132, 226, 0.1)
  }

  .panel::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }

  .panel::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }

  .panel .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .panel .panel-footer::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }

  .panel .panel-footer::after {
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
</style>

